import React from 'react';
import {StyleSheet, View} from 'react-native';

type ProcessBarProp = {
    initialProgress:string,
    backgroundStyle:any
    fillStyle:any
    style:any
}

type ProcessBarState = {
    processPercent:string
}

class ProcessBar extends React.Component<ProcessBarProp, ProcessBarState> {
    constructor(props) {
        super(props);
        this.state = {
            processPercent: this.props.initialProgress
        }
    }

    update(progressPercent:string) {
        this.setState({
            processPercent:progressPercent
        })
    }

    render() {
        return (
            <View style={[styles.background, this.props.backgroundStyle, this.props.style]}>
                <View style={[styles.fill, this.props.fillStyle, { width: this.state.processPercent} ]}/>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    background: {
        backgroundColor: '#bbbbbb',
        height: 4,
        overflow: 'hidden'
    },
    fill: {
        backgroundColor: 'rgba(0, 122, 255, 1)',
        height: 4
    }
});

export default ProcessBar;